<style>
    .ui-selected {
        background-color: #888888 !important;
        color: #ffffff !important
    }

    .ym-vtitle {
        padding: 3px 0 3px 0%;
        width: 100%;
    }

    table.narrow {
        margin: 0.2em 0 0;
    }

    h6 {
        margin: 0em 0 0;
    }
</style>

<script>

    $(function () {

        $('#dialog-form_type_event').dialog({autoOpen:false, modal:true});
        $('#dialog-form_event').dialog({autoOpen:false, modal:true});

        $('#table_porcino').selectable({
            filter:"tbody tr",
            stop:function (event, ui) {
                $(event.target).children('.ui-selected').not(':first').removeClass('ui-selected');
                getEvents(getSelectedPorcinoId());
            }
        });
        $('#table_events').selectable({
            filter:"tbody tr",
            stop:function (event, ui) {
                $(event.target).children('.ui-selected').not(':first').removeClass('ui-selected');
                var id = $(this).find(".ui-selected").attr('id');
                id = id.substr(5); //5 = event length
                var pos = id.search('_');
                var id_evento = id.substr(0, pos);
                var id_tipo = id.substr(pos + 1);
                getEvent(id_evento, id_tipo);
            }
        });

        $('#form_type_event').submit(function () {
                showFormEvento();
                return false;
            }
        );

    });

    function getSelectedPorcinoId() {
        var id = $('#table_porcino').find(".ui-selected").attr('id');
        return id.substr(5); //5 = porci length
    }

    function getEvents(i) {
        $('#table_events').children('tbody').html('');

        var url = '/eventos/porcino/';
        $.post(
            url,
            {
                'type':'json',
                'id':i
            },
            function (data) {
                var array = eval(data);
                for (var i = 0; i < array.length; i++) {
                    val = array[i].descripcion ? array[i].descripcion : '';
                    $('#table_events').children('tbody').append(
                        '<tr id="event' + array[i].id + '_' + array[i].tipo_evento_id + '"><td>' + array[i].fecha + '</td><td>' + array[i].nombre + '</td><td>' + val + '</td></tr>'
                    );
                }
            }
        )
    }

    function getEvent(id_evento, id_tipo) {
        var url = '/eventos/event/';
        $('#table_event').children('tbody').html('');
        $.post(
            url,
            {
                'type':'json',
                'id_evento':id_evento,
                'id_tipo':id_tipo
            },
            function (data) {
                var array = $.parseJSON(data);
                for (id_evento in array) {
                    if (array.hasOwnProperty(id_evento)) {
                        val = array[id_evento] ? array[id_evento] : '';
                        $('#table_event').children('tbody').append(
                            '<tr ><td>' + id_evento + '</td><td>' + val + '</td></tr>'
                        );
                    }
                }
            }
        )
    }

    function selectEventoType() {
        if ($('#table_porcino').find(".ui-selected").attr('id') == null) {
            showStatus(false, "Debe seleccionar el codigo de una hembra");
        } else {
            $('#dialog-form_type_event').dialog('open');
        }
    }

    function showFormEvento() {
        var id_tipo_evento = $('#id_tipo_evento').val();
        var url = '<?=$this->url(array("controller" => "eventos", "action" => "form"))?>';
        $.post(
            url,
            {
                'id_tipo_evento':id_tipo_evento,
                'id_porcino':getSelectedPorcinoId()
            },
            function (data) {
                $('#dialog-form_type_event').dialog('close');
                $('#dialog-form_event').html(data);
                $('#fecha').datepicker({dateFormat:'yy-mm-dd'});
                $('#dialog-form_event').dialog('open');
            }
        )
    }
</script>

<div id="dialog-form_event" title="Seleccione tipo de evento">
</div>

<div id="dialog-form_type_event" title="Seleccione tipo de evento">
    <form action="#" method="post" id="form_type_event">
        <select id="id_tipo_evento" name="id_tipo_evento" class="select ui-widget-content ui-corner-all" size="10"
                style="width: 100%">
            <?foreach ($this->eventos as $evento): ?>
            <option value="<?=$evento->getId()?>"><?=$evento->getNombre()?></option>
            <? endforeach;?>
        </select>
        <input type="submit">
    </form>
</div>
<div class="ym-grid">
    <div class="ym-g25 ym-gl">
        <div class="ym-gbox-left">
            <div class="nav-wrapper">

                <div class="ym-grid ym-vtitle">
                    <div class="ym-g50 ym-gl">
                        <h6>Hembras</h6>
                    </div>
                    <div class="ym-g50 ym-gr" align="right">
                        <a href="<?=$this->url(array('controller' => "porcinos", 'action' => 'form-hembras'), 'default', true) ?>"><img
                            alt="nuevo" src="/img/action_add.png"/></a>
                    </div>
                </div>

                <table id="table_porcino" class="bordertable narrow">
                    <thead>
                    <tr>
                        <th>Codigo</th>
                    </tr>
                    </thead>
                    <tbody>
                    <? foreach ($this->entries as $entry): ?>
                    <tr id="porci<?=$entry->getId()?>">
                        <td><?=$entry->getCodigo() ?></td>
                    </tr>
                        <? endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="ym-g50 ym-gl">

        <div class="nav-wrapper">
            <!--            <nav class="ym-vlist">-->
            <div class="ym-grid ym-vtitle">
                <div class="ym-g50 ym-gl">
                    <h6>Eventos</h6>
                </div>
                <div class="ym-g50 ym-gr" align="right">
                    <a href="#" onclick="selectEventoType()"><img alt="nuevo" src="/img/action_add.png"/></a>
                </div>
            </div>

            <table id="table_events" class="bordertable narrow">
                <thead>
                <tr>
                    <th>Fecha</th>
                    <th>Evento</th>
                    <th>Descripcion</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            <!--            </nav>-->
        </div>
    </div>
    <div class="ym-g25 ym-gr">
        <div class="ym-gbox">
            <div class="nav-wrapper">
                <nav class="ym-vlist">
                    <h6 class="ym-vtitle">Evento</h6>
                    <table id="table_event" class="bordertable narrow">
                        <thead>
                        <tr>
                            <th>Caracteristica</th>
                            <th>Valor</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </nav>
            </div>
        </div>
    </div>
</div>


<!--<div class="ym-wbox">-->
<!--    <div class="ym-grid linearize-level-2">-->
<!--        <div class="ym-g40 ym-gl">-->
<!--            --><? //
//            $this->list = array(
//                "Codigo" => "codigo",
//                "Ubicacion" => "ubicacionPocilga",
//                "Edad" => array("humanTiming", "fechaNacimiento"),
//                "Nombre" => "nombre",
//                "Estado" => "activo"
//            );
//            $this->controller = "porcinos";
//            $this->showNewLink = false;
//            $this->tasks = array(
//                array(
//                    "label" => "evento",
//                    "img" => "action_add.png",
//                    "url" => $this->url(array("controller" => 'eventos', "action" => "porcino"), 'default', true),
//                    "require_id" => true
//                )
//            );
////            echo $this->partial('list.phtml', $this)
?>
<!---->
<!---->
<!--            <a href="--><?//=$this->url(array('controller' => $this->controller, 'action' => 'form-hembras'), 'default', true) ?><!--">crear-->
<!--                nue avo</a>-->
<!---->
<!--        </div>-->
<!---->
<!--        <div class="ym-g60 ym-gr">-->
<!--            <div>-->
<!---->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->
